<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 简易商城</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 40px; /* 增加页面顶部间距 */
            background-color: #f0f2f5; /* 更柔和的背景色 */
        }
        .container {
            max-width: 800px; /* 容器宽度 */
            background-color: #ffffff;
            padding: 40px; /* 增加内边距 */
            border-radius: 12px; /* 更圆润的边角 */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* 更明显的阴影效果 */
        }
        h2 {
            color: #343a40;
            margin-bottom: 30px;
            font-weight: 600;
        }
        .card {
            border: none; /* 移除卡片边框 */
            border-radius: 8px; /* 统一卡片圆角 */
            margin-bottom: 30px; /* 卡片下方间距 */
            overflow: hidden; /* 确保圆角效果 */
        }
        .card-header {
            background-color: #007bff; /* 主色调头部 */
            color: white;
            font-weight: bold;
            padding: 15px 25px; /* 增加内边距 */
            font-size: 1.15rem;
        }
        .card-body p {
            margin-bottom: 8px; /* 段落间距 */
            font-size: 0.98rem;
        }
        .card-body strong {
            color: #555;
        }
        .card-body .text-danger {
            font-size: 1.1rem; /* 总金额字体大一点 */
        }

        h4 {
            color: #343a40;
            margin-top: 30px;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .table {
            margin-bottom: 25px;
        }
        .table th, .table td {
            vertical-align: middle;
            padding: 12px;
            font-size: 0.95rem;
        }
        .table thead th {
            background-color: #e9ecef;
            border-bottom: 2px solid #dee2e6;
        }
        .table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .status-badge {
            padding: .4em .8em;
            border-radius: .3rem;
            font-size: 0.85rem;
            font-weight: 500;
            display: inline-block;
        }
        .status-0 { background-color: #ffc107; color: #6a5700; } /* 待支付 - 黄色系 */
        .status-1 { background-color: #28a745; color: white; } /* 已支付 - 绿色系 */
        .status-2 { background-color: #6c757d; color: white; } /* 已取消 - 灰色系 */

        .btn-lg {
            padding: .65rem 1.25rem;
            font-size: 1.1rem;
            border-radius: .3rem;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center">订单详情</h2>

        <div class="card">
            <div class="card-header">
                订单基本信息
            </div>
            <div class="card-body">
                <p><strong>订单号:</strong> {$order.order_sn}</p>
                <p><strong>总金额:</strong> <span class="text-danger">¥{$order.total_price|number_format=2}</span></p>
                <p><strong>下单时间:</strong> {$order.create_time ?: '暂无'}</p>
                <p><strong>订单状态:</strong> <span class="status-badge status-{$order.order_status}">{$order.order_status_text}</span></p>
                <p><strong>支付时间:</strong> {$order.pay_time ?: '暂无'}</p>
            </div>
        </div>

        <h4>商品列表</h4>
        <div class="table-responsive"> {/* 使表格在小屏幕上可滚动 */}
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="order.order_items" id="item"}
                    <tr>
                        <td>{$item.product_name}</td>
                        <td>¥{$item.product_price|number_format=2}</td>
                        <td>{$item.quantity}</td>
                        <td>¥{$item.product_price * $item.quantity|number_format=2}</td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        </div>

        <div class="text-center mt-4">
            {if $order.order_status == 0}
            <a href="{:url('index/payOrder', ['orderId' => $order.id])}" class="btn btn-success btn-lg mr-3" onclick="return confirm('确定要支付此订单吗？');">立即支付</a>
            {/if}
            <a href="{:url('index/myOrders')}" class="btn btn-secondary btn-lg">返回我的订单</a>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>